
@extends('Home.common.header')

<!-- 添加meta csrf_token -->
<meta name="csrf-token" content="{{ csrf_token() }}">  

<!-- 模态框 -->
<link rel="stylesheet" href="{{ asset('/css/order.css') }}" >
<link href="{{ asset('/css/orders.css') }}" rel="stylesheet" >
<script src="{{ asset('/js/jquery-1.8.3.min.js') }}"></script>
<script>
	
	<!-- 2.设置全局ajax选项 -->
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	var _token = $('meta[name="csrf-token"]').attr('content');
	
	
	
</script>



<body>
<div style="width:100%;margin-top:50px;float:left;" class="div">
	
	
<!-- 新增地址 
<div class="address" style="float:left;margin-bottom:20px;" >
	<h4>新增地址</h4>
	<div class="addres-div1">
		<center id="addAddr">
				
				<a style="margin-right:985px;text-decoration:none;" href="#loginmodal" class="btn btn-primary" id="modaltrigger">
					+新增地址
				</a>

		</center>
		
	</div>
</div>-->


<!-- 地址表单 
<div id="loginmodal" style="display:none;">
	<h4>新增地址</h4>
	
	<label for="username" style="margin-bottom:5px;" >收件人:</label>
	<input type="text" name="" id="username" class="form-control" tabindex="1" style="margin-bottom:5px;" />

	<label for="addr" style="margin-bottom:5px;" >详细地址:</label>
	<input type="text" name=""  id="addr" class="form-control" tabindex="2" style="margin-bottom:5px;" placeholder='店内' />

	<label for="phone" style="margin-bottom:5px;" >手机号码:</label>
	<input type="text" name="" id="phone" class="form-control" tabindex="2" placeholder="" style="margin-bottom:5px;"  />
  
	<div class="center" style="margin-top:15px;">
		<button id="createAddr"  class="btn btn-danger" style="width:260px;" >确认</button>
	</div>
	
</div>-->

<div class="cargolist">
	<h4>服务车型</h4>
	<input type="text" name="car" id='car' class="form-control"  placeholder="请输入服务车型" style="width:300px;margin-left:100px;margin-top:-35px;margin-bottom:20px;"  />
	<h4>服务人员</h4>
	<div class="checkbox" style="margin-left:100px;margin-top:-30px;font-size:17px;">
		@forelse( $all_admin as $admin )
			<label style="margin-right:15px;">
				<input type="checkbox" name="worker" value="{{ $admin->id }}" />{{ $admin->name }}
			</label>
		@empty
		@endforelse
	</div>
</div>


<div class="cargolist">
	<h4>订单概览</h4>
</div>
	
<!-- 订单清单 -->
<div class="cargolist">
	<div>
		<table style="margin-left:2%;">
		<!-- 模板 -->
		@forelse($coms_info as $key => $com_info)
			<tr >
				<td class="cargolist-img">
					<img class="cargolist-img-img" src="{{ asset('/images/coms') }}/{{  $com_info->pic_url }}" alt="">
				</td>
				<td class="cargolist-name">{{ $com_info->name }}</td>
				<td class="cargolist-number">数量:{{ $nums[$com_info->id] }}</td>
				<td class="cargolist-price">{{ $com_info->price }}</td>
				<td class="cargolist-subtotal">￥{{ $nums[$com_info->id]*$com_info->price }}</td>
			</tr>
		@empty
			<tr>
				<td class="tbody-title">
					<h2>订单为空</h2>
				</td>
			</tr>
		@endforelse	
			
		</table>
	</div>
</div>
	
	
	
	
<!-- 付款方式 -->
<div class="cargolist">
	<h4>付款方式</h4>
	<ul style="margin-left:-2%;">
		<li style="list-style-type:none;" >
			<!-- 隐藏区 -->
			<table id="on1" style="display:block;">
				@forelse( $all_pay as $pay )
				<!--  微信 -->
				<tr style="float:left;">
					<td>
						
						<label class="td-hidden" for="payInfo_{{ $pay->id }}" data-name="radio1" id="pay_{{ $pay->id }}" style="cursor:pointer;" >
							
							<!-- 单选按钮 -->
							<input type="radio" name="pay_id" value="{{ $pay->id }}" id="payInfo_{{ $pay->id }}" style="cursor:pointer;" checked /> {{ $pay->name }}
							<!-- 
								<img src="{{ asset('/images/order/2.jpg') }}" class="td-hidden-img"  > 
							-->
								
							<!-- 微信 支付宝二维码 -->
							<span style="display:none;" id="payImg_{{ $pay->id }}"  >
								<img style="width:170px;">
							</span>
							
						</label>
					</td>
				</tr>
				@empty
				@endforelse
			</table>
		</li>
	</ul>
</div>
	
	

<div class="submit" >
	
	<div class="submit-div2">
		
		<!-- 订单总价 -->
		<table style="border-collapse:collapse;" class="submit-table2">
			<tr>
				<td class="submit-total">商品总价：</td>
				<td class="submit-total2">¥{{ $need_to_pay }}</td>
			</tr>
			<tr class="submit-end">
				<td class="submit-end1">应付总额：</td>
				<td class="submit-end2">¥{{ $need_to_pay }}</td>
			</tr>
		</table>
		
		<!-- 提交订单按钮 -->
		<div class="submit-2" style="margin-top:30px;" >
			<button style="padding: 11px 83px;" class="btn btn-info" data-toggle="modal" data-target=".bs-example-modal-sm" id="submit_order" >提交订单</button>
			<p class="p-text">点击表示您同意Car Club商城的销售政策</p>
			<!-- 1.模态框 不要动 -->
			<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
				<div class="modal-dialog modal-sm" role="document" id='show_info'  style="margin-top:80px;margin-left:500px;font-size:20px;color:white;"></div>
			</div>
		</div>
		
	</div>
	
</div>
	
	
	
	
</div>


<script type="text/javascript" src="{{ asset('/js/jquery-1.9.1.min.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ asset('/js/jquery.leanModal.min.js') }}"></script>
<script type="text/javascript">
	
	// 地址 模态框 必须写页面下面
	$('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
	
	$(function(){
		
		// 地址 ID
		/*var id = 1;
		// 地址 个数
		var total = 1;
		
		// 新增 地址 按钮
		$("#modaltrigger").click(function(){
			if( total>1 )
			{
				alert('您最多添加1个地址');
				$('#loginmodal').css("display",'none');
				$("#lean_overlay").css({"display":"none",opacity:0});
				
			}
		});
		
		// 表单 新增地址 确认按钮
		$("#createAddr").click(function(){
			// 模态框隐藏
			$('#loginmodal').css("display",'none');
			$("#lean_overlay").css({"display":"block",opacity:0});
			// 收件人
			var username = $("#username").val();
			// 地址
			var addr = $("#addr").val();
			// 电话
			var phone = $("#phone").val();
			var str='';
			str += '收件人:'+username;
			str += '<br/>电话:'+phone;
			str += '<br/>收货地址:'+addr;
			
			// 地址 显示模板
			var sample="<div class='alert alert-warning alert-dismissible' style='width:300px;margin-top:20px;margin-left:50px;font-size:18px;float:left;' ><button class='close' id='addr_"+id+"'><span aria-hidden='true'>&times;</span></button>"+str+"</div>";
			$("#addAddr").after(sample);
			// 地址 附加 删除事件
			$("#addr_"+id).on("click",function(){
				$(this).parent().css('display','none');
				// 总数 减一
				total -= 1;
			});
			id++;
			total +=1;
		})*/
		
		
		// 点击 生成订单
		$("#submit_order").click(function(){
			
			// 服务车型
			var car = $("#car").val();
			// 服务人员
			var worker = '';
			$("input[name='worker']:checked").each(function(){
				worker += $(this).val()+',';
			});
			// 支付方式
			var pay_id = $("input[type='radio']:checked").val();
			
			/* 备用
				// 收件人 
				var username = $("#username").val();
				// 地址
				var addr = $("#addr").val();
				// 电话
				var phone = $("#phone").val();
			*/
			
			
			
			$.ajax({
				type:"post",
				url:"{{ url('/createOrder') }}",
				// 备用 data:{username:username,addr:addr,phone:phone},
				data:{car:car,worker:worker,pay_id:pay_id,_token:_token},
				async:false,    					
				dataType:"json",
				success:function(back){
					if( back['show_info']=='交易成功' )
					{
						$('#show_info').html( '' );
						$('#show_info').html( back['show_info'] );
						location.href="{{ url('/success') }}";
					}else{
						$('#show_info').html( '' );
						$('#show_info').html( back['show_info'] );
					}
					
				}
			});
		})
		
		
		
		// 现金 余额 支付
		$("#pay_1,#pay_4").click(function(){
			// 微信 支付宝 收起
			$("#payImg_2,#payImg_3").slideUp();
		})
		
		// 余额 ( 待开发 )
		$("pay_4").click(function(){
			
		})
		
		// 微信
		$("#pay_2").click(function(){
			// 获取微信二维码
			$("#payImg_2 img").attr( 'src',"{{ url('/images/order/weixin.jpg') }}" );
			// 支付宝 收起
			$("#payImg_3").slideUp();
			// 微信二维码 展开
			$("#payImg_2").slideDown();
		})
		
		// 支付宝
		$("#pay_3").click(function(){
			// 获取支付宝二维码
			$("#payImg_3 img").attr( 'src',"{{ url('/images/order/alipay.jpg') }}" );
			// 微信 收起
			$("#payImg_2").slideUp();
			// 支付宝二维码 展开
			$("#payImg_3").slideDown();
		})
	  
	});
	
	

</script>
</body>

@extends('Home.common.footer')